<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="registPage">
        <div class="regist-pad">
            <h2>博客注冊資料</h2>
            <p><label><span>用&ensp;戶&ensp;名</span><input type="text" v-model="userName"></label></p>
            <p><label><button>檢測用戶</button></label></p>
            <p><label><span>密&emsp;&emsp;碼</span><input type="password" v-model="password"></label></p>
            <p><label><span>確認密碼</span><input type="password"></label></p>
            <p><label><span>生&emsp;&emsp;日</span><input type="date" v-model="birthDay"></label></p>
            <p><label><span>性&emsp;&emsp;別</span><select name="" id="" v-model="sex">
                <option value="0">女</option>
                <option value="1">男</option>
                <option value="N">保密</option>
            </select></label></p>
            <p><label><span>密碼問題</span><input type="text" v-model="passwordQuestion"></label></p>
            <p><label><span>問題答案</span><input type="text" v-model="passwordAnswer"></label></p>
            <p><label><span>E-mail</span><input type="text" v-model="email"></label></p>
            <p><label><span>QQ</span><input type="text" v-model="qq"></label></p>
            <div class="regist-button">
                <p><button @click="onRegist">注册</button><button @click="onCancel">取消</button></p>
            </div>
        </div>
    </div>
</body>
<script>
    const { createApp, toRefs, reactive } = Vue;
    const app = createApp({
            setup() {
                const registInfo = reactive({
                    userName:"",
                    password:"",
                    sex:"",
                    birthDay:"1970-01-01",
                    passwordQuestion:"",
                    passwordAnswer:"",
                    email:"",
                    qq:""
                })
                const onRegist=()=>{
                    axios .post("http://localhost:5143/api/User/RegistUser",registInfo)
                }
                return{
                    ... toRefs(registInfo),
                    onRegist,
                };
            }
        }
    )
    app.mount("#registPage")
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .regist-pad{
        height: 455px;
        width: 415px;
        border: 1px solid #000;
        margin: 35px auto;
    }
    .regist-pad h2
    {
        margin-top: 20px;
        text-align: center;
        border-top: 20px solid rgb(230, 230, 230);
    }
    .regist-pad p{
        margin: 10px 0;

    }
    .regist-pad p span{
        display: inline-block;
        width: 90px;
        text-align: center;
    }
    .regist-pad p button{
        margin-left: 90px;
    }
    .regist-button{
        height: 50px;
        width: 415px;
        margin-top: 20px;
    }
    .regist-button p{
        margin: 10px;
    }
    .regist-button button{
        height: 25px;
        width: 50px;
        text-align: center;
    }
</style>
</html>